<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<title>成程科技集团-集团产品</title>
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="description" content="成程科技集团 成程 成程科技 集团产品" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css//swiper-4.4.2.min.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/modernizr.custom.js"></script>
	<script type="text/javascript" src="js/more.js"></script>
	<script type="text/javascript" src="js/swiper-4.4.2.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js//bootstrap.min.js"></script>
	<style>
		/* Header and Navigation */
		.index-header {
			position: relative;
			/* Ensure it doesn't overlap with other elements */
			z-index: 10;
			/* Make sure it is above other content */
			border-radius: 0;
			width: 100%;
		}

		.index-logo img {
			max-width: 200px;
			height: auto;

		}

		.cp {
			padding-left: 1.2rem;
			width: 100%;
			height: 13rem;
		}

		.active {
			color: #259bd9 !important;
			border-bottom: 1px solid #259bd9;
		}

		.titl-cent {
			cursor: pointer;
		}

		.navbar-custom {
			background-color: rgba(37, 155, 217, 0.8);
			/* Slight transparency */
			border-radius: 20px;
			padding: 0px 10px;
		}

		.navbar-nav .nav-link {
			color: aliceblue;
			padding: 10px 15px;
		}



		/* .navbar-nav .nav-link.active {
			border-bottom: 2px solid rgba(255, 255, 255, 0.4);
		} */

		@media (max-width: 768px) {
			.index-logo img {
				max-width: 180px;
			}

			.navbar-nav {
				text-align: center;
			}

			.navbar-nav .nav-link {
				display: block;
				padding: 10px;
			}
		}

		.ma {
			margin-left: 10px;
		}

		@media (max-width :500px) {
			.fons18 h5 {
				font-size: .8rem !important;
			}

			.ma {
				margin-left: 50px;
			}

			.cp {
				padding-left: 1.2rem;
				width: 100%;
				height: 7rem;
			}
		}
	</style>
	<style>
		/* Header and Navigation */
		.index-header {
			position: relative;
			/* Ensure it doesn't overlap with other elements */
			z-index: 10;
			/* Make sure it is above other content */
			border-radius: 0;
			width: 100%;
		}

		.index-logo img {
			max-width: 200px;
			height: auto;
		}

		.navbar-custom {
			background-color: rgba(37, 155, 217, 0.8);
			/* Slight transparency */
			border-radius: 20px;
			padding: 0px 10px;
		}

		.navbar-nav .nav-link {
			color: aliceblue;
			padding: 10px 15px;
		}

		/* .navbar-nav .nav-link.active {
			border-bottom: 2px solid rgba(255, 255, 255, 0.4);
		} */

		@media (max-width: 768px) {
			.index-logo img {
				max-width: 180px;
			}

			.navbar-nav {
				text-align: center;
			}

			.navbar-nav .nav-link {
				display: block;
				padding: 10px;
			}
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var List = []
			var swiphtml = '';
			$.get(host + '/iot/product/treeselect', data => {
				console.log('==================================', data);
				var list = data['data'];
				var str = list[0].children
				List = data['data']
				var children = []
				var numc = 0;

				var swiphtml = '';
				var productTitle = ''
				for (let i = 0; i < str.length; i++) {
					if ((i + 1) % 2 == 1) {
						if (str[i].toUrl) {
							swiphtml =
								swiphtml +
								`<div class='g-0 col-12 row prdcbg' style=''>
									<div class='col-1'></div>
									<div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>
										${str[i].navName}
									</div>
									<div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'>
										<a  href="${str[i].toUrl}"><img src='${host + str[i].picUrl}'><a/>
									</div>
									<div class='col-1'></div>
								</div>`;
						} else {
							swiphtml =
								swiphtml +
								`<div class='g-0 col-12 row prdcbg' style=''><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>
								${str[i].navName}
								</div><div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'> <img src='${host + str[i].picUrl}'></div><div class='col-1'></div></div>`;
						}

					} else {
						if (!str[i].toUrl) {
							swiphtml =
								swiphtml +
								`<div class='g-0 col-12 row prdcbg' style=''>
									<div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'>
										<img src='${host + str[i].picUrl}'>
									</div>
								    <div class='col-1'></div>
									
									<div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>
									      ${str[i].navName}
									</div>
									<div class='col-1'></div>
								</div>`;
						} else {
							`<div class='g-0 col-12 row prdcbg' style=''>
									<div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'>
										<a  href="${str[i].toUrl}"><img src='${host + str[i].picUrl}'><a/>
									</div>
								    <div class='col-1'></div>
									
									<div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>
									      ${str[i].navName}
									</div>
									<div class='col-1'></div>
								</div>`;

						}
					}
				}

				for (let i = 0; i < list.length; i++) {
					productTitle =
						productTitle +
						`<div class="col-sm-1" style=" margin-right: 10px">
									<h5 class="titl-cent"  id="${i}"  style="text-align: center; margin: 0 10px; padding-bottom:3.5rem;height: 40px; color: black;">${list[i].navName}
									</h5>
								</div>`;
				}
				elempr = document.getElementById('pr');
				elempr.innerHTML = swiphtml;
				elempr = document.getElementById('title');
				elempr.innerHTML = productTitle;
				var objs = document.querySelector('.titl-cent')
				console.log(objs, 'objs');
				objs.classList.add("titl-cent", "active");
			});

			$.get(host + '/iot/nav/treeselect?parentId=4', data => {
				console.log(data, '11111');
				var list = data['data'];
				let imghtml = ''
				for (let i = 0; i < list.length; i++) {
					if (list[i].toUrl) {
						imghtml = imghtml + `<div class="swiper-slide">
						<a  href="${list[i].toUrl}"><img src="${host + list[i].picUrl}" alt="" /></a>
						</div>`
					} else {
						imghtml = imghtml + `<div class="swiper-slide">
					       <img src="${host + list[i].picUrl}" alt="" />
						</div>`
					}
				}
				elempr = document.getElementById('homeimg');
				elempr.innerHTML = imghtml;
			});

			$.get(host + '/iot/pics/list?pageNum=1&pageSize=30', data => {
				var list = data['rows'];
				var img1, img2, img3;
				var fimg1, fimg2;
				var cimg1, cimg2, cimg3, cimg4, cimg5;
				var cimg6, cimg7, cimg8, cimg9, cimg10;

				for (let i = 0; i < list.length; i++) {
					// /* 首页广告 */
					// if (list[i].type == '101') {
					// 	imgArray = list[i].url.split(',');
					// 	img1 = host + imgArray[0];
					// 	document.getElementById('img1').src = img1;
					// 	img2 = host + imgArray[1];
					// 	document.getElementById('img2').src = img2;
					// 	img3 = host + imgArray[2];
					// 	document.getElementById('img3').src = img3;
					// 	imgArray = list[i].url.split(',');
					// }
					/* Footer */
					if (list[i].type == '103') {
						imgArray = list[i].url.split(',');
						fimg1 = host + imgArray[0];
						console.log(fimg1);
						document.getElementById('fimg1').src = fimg1;
						fimg2 = host + imgArray[1];
						document.getElementById('fimg2').src = fimg2;
						document.getElementById('tel').innerHTML = list[i].stra;
						document.getElementById('addr').innerHTML = list[i].strb;
						var urlArray = list[i].strc.split('#');
						document.getElementById('outurl1').innerHTML = urlArray[0];
						document.getElementById('outurl1').href = urlArray[1];
						urlArray = list[i].strd.split('#');
						document.getElementById('outurl2').innerHTML = urlArray[0];
						document.getElementById('outurl2').href = urlArray[1];
						urlArray = list[i].stre.split('#');
						document.getElementById('outurl3').innerHTML = urlArray[0];
						document.getElementById('outurl3').href = urlArray[1];
						imgArray = list[i].url.split(',');
					}
				}
			});
			setTimeout(() => {
				$(".titl-cent").click(function (e) {
					swiphtml = ''
					var id = $(this).attr("id");
					$(this).attr("class", "titl-cent active")
					$(".titl-cent").not("#" + id).attr("class", "");
					children = List[id].children
					for (let i = 0; i < children.length; i++) {
						// 	// var numc = 0;
						// 	// numc = numc + 1;
						if ((i + 1) % 2 == 1) {
							if (children[i].toUrl) {
								swiphtml =
									swiphtml +
									`<div class='g-0 col-12 row prdcbg' style=''><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>
									${children[i].navName}
									</div><div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'><a  href="${children[i].toUrl}"><img src='${host + children[i].picUrl}'><a/></div><div class='col-1'></div></div>`;
							} else {
								swiphtml =
									swiphtml +
									"<div class='g-0 col-12 row prdcbg' style=''><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>" +
									children[i].navName +
									"</div><div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'><img src='" +
									host +
									children[i].picUrl +
									"'></div><div class='col-1'></div></div>";
							}

						} else {
							if (children[i].toUrl) {
								swiphtml =
									swiphtml +
									`<div class='g-0 row prdcbg' style=''><div class='col-1'></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcleft' style='padding: 10px;'><a  href="${children[i].toUrl}"><img src='${host + children[i].picUrl}'><a/></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcright'  style='text-align: center;'>
									${children[i].navName }
									</div><div class='col-1'></div></div>`;
							} else {
								swiphtml =
									swiphtml +
									"<div class='g-0 row prdcbg' style=''><div class='col-1'></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcleft' style='padding: 10px;'><img src='" +
									host +
									children[i].picUrl +
									"' ></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcright'  style='text-align: center;'>" +
									children[i].navName +
									"</div><div class='col-1'></div></div>";
							}

						}
					}

					elempr = document.getElementById('pr');
					elempr.innerHTML = swiphtml;

				})
			}, 1000)


		};
	</script>
</head>

<body>
	<div class="index-header">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container-fluid d-flex align-items-center">
				<div class="index-logo">
					<a href="index.html"><img src="imgs/logo.png" alt="Logo" /></a>
				</div>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
					aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarCollapse">
					<ul class="navbar-nav ms-auto">
						<li class="nav-item"><a href="index.html" class="nav-link">首页</a></li>
						<li class="nav-item"><a href="about.html" class="nav-link">集团简介</a></li>
						<li class="nav-item"><a href="news.html" class="nav-link">集团要闻</a></li>
						<li class="nav-item"><a href="products.html" class="nav-link active">集团产品</a></li>
						<li class="nav-item"><a href="program.html" class="nav-link">项目发展</a></li>
						<li class="nav-item"><a href="science.html" class="nav-link">科研成果</a></li>
						<li class="nav-item"><a href="pharmacy.html" class="nav-link">药效学成果</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div id="bloc" class="container-fluid g-0">
		<!--big new-->
		<article id="index">
			<div class="banner-position g-0">
				<div class="index-banner swiper-container">
					<div class="swiper-wrapper" id="homeimg">

					</div>
					<!-- Add Navigation -->
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
			</div>
			<div class="clear"></div>
			<!--product-->
			<div class="prbg cp">
			</div>
			<div class="fix fons18" id="title">
				<!-- <div class="col-sm-5"></div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px; margin-right: 10px">
					<h5 style="margin: 0 10px; height: 40px; color: #259bd9; border-bottom: 1px solid #259bd9">饮液系列
					</h5>
				</div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px">
					<h5><a style="color: black" href="products2.html">饮用水系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px">
					<h5><a style="color: black" href="products3.html">日用品系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px">
					<h5><a style="color: black" href="products4.html">超微粉系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px">
					<h5><a style="color: black" href="products5.html">酒系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px; margin-top: 80px">
					<h5><a style="color: black" href="products6.html">设备系列</a></h5>
				</div> -->
			</div>
			<div class="clear"></div>
			<div class="g-0 col-sm-12" style="padding: 0" id="pr"></div>
			<div class="clear"></div>
			<div class="g-0 col-sm-12" style="padding: 0">
				<img src="imgs/products_03.png" class="g-0 col-sm-12" />
			</div>
			<div class="clear"></div>
			<!-- Footer -->
			<div class="g-0 col-sm-12 fbg row" style="padding: 0;">
				<div class="g-0 col-sm-4"></div>
				<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
					<p>
						<h5>联系我们</h5>
					</p>
					<p id="tel"></p>
					<p id="addr"></p>
					<p>备案号: <a id="outurl0">黑ICP备2024022673号</a>
					</p>
				</div>
				<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
					<p>
						<h5>友情链接</h5>
					</p>
					<p><a id="outurl1">碳方会</>
					</p>
					<p><a id="outurl2">成程碳方中医诊所</a></p>
					<p><a id="outurl3">黑龙江省中医抗癌协会</a></p>
				</div>
				<div class="g-0 col-sm-1 fix ma"><img id="fimg1" src=""></div>
				<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;"><img id="fimg2" src="">
				</div>
				<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;height: 7.5rem;"><img
						src="imgs/ccfwdz.png">
				</div>
				<div class="g-0 col-sm-2 fix"></div>
			</div>
			<div class="clear"></div>
		</article>
	</div>

	<script type="text/javascript">
		var swiper = new Swiper('.index-banner.swiper-container', {
			speed: 600,
			parallax: true,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			loop: true,
			autoplay: {
				delay: 3000,
				disableOnInteraction: false //false时，用户操作后重新轮播
			},
			observer: true, //修改swiper自己或者子元素时，自动初始化
			observeParents: true //修改swiper的父元素时，自动初始化swiper
		});
	</script>
</body>

</html>